<template>
	<view class="body">
		<myHead :title="title" />
		<scroll-view scroll-y="true" class="scroll-Y" style="height: 100%;">
		 <uni-forms :value="meeting" ref="form" label-position="top">
		            <uni-forms-item label="创建人" posion="top" >
						<span class="text">{{meeting.createUser}}</span>
		            </uni-forms-item>
		            <uni-forms-item label="会议名称" posion="top" >
						<span class="text">{{meeting.meetName}}</span>
		            </uni-forms-item>
					
					<uni-forms-item label="会议文件" >
						<uni-grid :column="5" :showBorder="false"  :square="false">
						    <uni-grid-item  v-for="(file,file_index) in c_files" :key="file_index">
						       <image v-if="file.isimg" :src="file.url"
								mode=""></image>
						       <image v-else :src="'../../static/party_building/assets/fileType/'+file.suffix"
						        mode=""></image>
								<p   @tap.stop="downloadFile(file.url)">{{file.fileName}}</p>
						</uni-grid-item>
						</uni-grid>
					</uni-forms-item>
					
					<uni-forms-item label="执行人" posion="top" >
						<span class="text">{{meeting.planUser}}</span>
					</uni-forms-item>
					
						<uni-forms-item label="方案说明">
							<uni-easyinput required="true" disabled   type="textarea" v-model="meeting.meetDesc" />
						</uni-forms-item>
					<uni-forms-item label="方案文件" >
						<uni-grid :column="5" :showBorder="false"  :square="false">
						    <uni-grid-item  v-for="(file,file_index) in e_files" :key="file_index">
						       <image v-if="file.isimg" :src="file.url"
								mode=""></image>
						       <image v-else :src="'../../static/party_building/assets/fileType/'+file.suffix"
						        mode=""></image>
								<p   @tap.stop="downloadFile(file.url)">{{file.fileName}}</p>
						</uni-grid-item>
						</uni-grid>
					</uni-forms-item>
		        </uni-forms>
			
				</scroll-view>
	</view>
</template>

<script>
	import myHeader from '../components/head.vue'
	import {getMeetingDetail} from '../../api/api_party_meeting.js'
	import {
		getVolunteerMeetDetail
	} from '../../api/api_voluntee.js'
	export default {
		name: "child",
		props: {
			meetingId: { 
			   type: Number,
			   default: 0,
			}
		},
		data() {
			return {
			title: "详情",
				meeting:{
				},
				c_files:[],//0 是创建人文件
				e_files:[],//1 是执行人文件
				imgsuffix: ['.png', '.jpg', '.jpeg'],
			}
		},
		components: {
			myHead: myHeader,
		},onLoad(e) {
		},
		mounted() {
			let _this = this 
			console.log(this.meetingId)
			getVolunteerMeetDetail({'meetId':this.meetingId}).then(res=>{
				_this.meeting = res.meet
				//包装文件
				console.log(res.files)
				res.files.filter(e=>e.vffileType==="0").forEach(file=>{
					let suffix = '';
					switch(file.suffix){
						case ".doc":
						case ".docx":
							suffix = 'word.png';
							break;
						case ".pdf":
							suffix = 'pdf.png';
							break;
						case ".excel":
							suffix = 'excel.png';
							break;
						default :
							suffix = 'otherFile.png'
					}
					console.log(_this.imgsuffix.indexOf(file.suffix))
					_this.c_files.push({
						fileName:file.fileName,
						isimg:_this.imgsuffix.indexOf(file.suffix)>=0,
						url:file.baseFileUrl,
						suffix,
					})
				})
				console.log(_this.c_files)
				
				res.files.filter(e=>e.vffileType==="1").forEach(file=>{
					let suffix = '';
					switch(file.suffix){
						case ".doc":
						case ".docx":
							suffix = 'word.png';
							break;
						case ".pdf":
							suffix = 'pdf.png';
							break;
						case ".excel":
							suffix = 'excel.png';
							break;
						default :
							suffix = 'otherFile.png'
					}
					_this.e_files.push({
						fileName:file.fileName,
						isimg:_this.imgsuffix.indexOf(file.suffix)>=0,
						url:file.baseFileUrl,
						suffix,
					})
				})
				console.log(_this.e_files)
				
				//任务
				
			})
		},
		methods: {
			  downloadFile(url){
				  console.log(url)
			          const iframe = document.createElement("iframe");
			          iframe.style.display = "none";  // 防止影响页面
			          iframe.style.height = 0;  // 防止影响页面
			          iframe.src = url;
			          document.body.appendChild(iframe);  // 这一行必须，iframe挂在到dom树上才会发请求
			          // 5分钟之后删除（onload方法对于下载链接不起作用，就先抠脚一下吧）
			          setTimeout(()=>{
			            iframe.remove();
			          }, 5 * 60 * 1000);
			        },
				download(url) {
					console.log(url)
					uni.downloadFile({
						url: url, //仅为示例，并非真实的资源
						success: (e) => {
							if (e.statusCode === 200) {
								let tempFilePaths = e.tempFilePath;
								console.log('地址', tempFilePaths)
								/*注意：saveFile 会把临时文件移动，因此调用成功后传入的 tempFilePath 将不可用。*/
								// uni.saveFile({
								// 	tempFilePath: tempFilePaths,
								// 	complete: (res) => {
								// 		var savedFilePath = res.savedFilePath;
								// 		console.log(savedFilePath);
								// 		uni.showToast({
								// 			title: '保存成功',
								// 			icon: 'none'
								// 		})
								// 	}
								// });
							}
						},
						fail: (err) => {
							console.log(err);
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '失败请重新下载',
							});
						},
					});
				},
			loadImg(arr){
				console.log(11111)
				uni.previewImage({
				            urls: arr,
				            longPressActions: {
				                itemList: ['发送给朋友', '保存图片', '收藏'],
				                fail: function(err) {
				                  uni.showToast({
				                  	title:'图片加载出错',
									duration:2000,
									icon:'none'
				                  })
				                }
				            }
				        });
			}
		},
	}
</script>
<style lang="scss" scoped>
	
	/**
	 * 定义按钮样式
	 */
	@mixin button-commit {
	  background: linear-gradient(180deg, #ff5e59, #e20909);
	  color: #fff;
	}
	.body{
		height: 100%;
		background-color:#f1f1f1 ;
		/deep/ .uni-forms{
			padding-bottom: 12px;
			.uni-forms-item{
				padding: 0 12px;
				background-color: #FFFFFF;
				.uni-forms-item__content{
					.uni-grid-wrap{
						.uni-grid{
							.uni-grid-item{
								// margin: 0 2.5px;
								width: auto!important;
								margin: 0 0.5%;
								p{
									font-size: 12px;
									width: 120upx;
									position: absolute;
									top: 70%;
									background-color: rgba(0,0,0,0.4);
									color: #FFF;
									overflow:hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
									-o-text-overflow:ellipsis;
									
								}
								.uni-grid-item__box{
									border: 1px #e5e5e5 solid;
								}
								uni-image{
									max-width: 120upx;
									max-height: 120upx;
								}
							}
						}
					}
				}
				.uni-forms-item__label{
					.label-text{
					>span{
						font-size: 14px;
						color: #999999;
					}	
					}
				}
				.uni-forms-item__inner{
					padding-bottom: 0px;
				}
			}
		}
		/deep/ .uni-collapse{
			.uni-card{
				margin: 0px;
				.first{
					position: absolute;
					top: 65.5%;
					left: 300upx;
				}
				.second{
					position: absolute;
					bottom: 17.5%;
					left: 300upx;
				}
				.photos1{
					position: absolute;
					top: 33%;
					right: 0px;
					.uni-grid{
						justify-content: flex-end;
					}
				}
				.photos2{
					position: absolute;
					top: 60%;
					right: 0px;
					.uni-grid{
						justify-content: flex-end;
					}
				}
			}
		.uni-grid-wrap{
				width: 40%;
			.uni-grid-item{
				width: 20% !important;
				uni-image{
					width: 50upx;
					height: 50upx;
				}
			}
		}
		
		}
	}
</style>
